<script setup lang="ts">
import type { MovieItem, Response } from "~/types";
const pageIndex = ref(1);
const noMoreContent = ref(false);
const mediaDataList = ref<MovieItem[]>([]);
import { useInfiniteScroll } from "@vueuse/core";

const input = ref("");

const resetSearch = () => {
  mediaDataList.value = [];
  pageIndex.value = 0;
  noMoreContent.value = false;
};

const search = async () => {
  resetSearch();
  if (!input.value) {
    return;
  }
  getDataRequest(true);
};

// const {} = useInfiniteScroll(
//   containerRef,
//   () => {
//     getDataRequest(true);
//   },
//   {
//     distance: 20,
//     canLoadMore: () => {
//       if (noMoreContent.value) return false;
//       return true; // for demo purposes
//     },
//   }
// );

const getDataRequest = async (next: boolean = false) => {
  const pageSize = 30;
  if (next) {
    pageIndex.value++;
  }
  const { data } = await useFetch<
    Response<{ list: MovieItem[]; total: number }>
  >("/bsmovie/list", {
    baseURL: useRuntimeConfig().public.baseUrl,
    server: false,
    method: "post",
    body: {
      movieName: input.value,
      page: pageIndex.value,
      size: pageSize,
    },
    pick: ["data"],
  });
  const his = mediaDataList.value || [];
  mediaDataList.value = his.concat(data.value?.data.list || []);
  noMoreContent.value =
    pageIndex.value * pageSize >= (data.value?.data.total || 0);
};
</script>

<template>
  <div>
    <div flex bg-gray:10 items-center px6 py4 gap3 sticky top-0 z-99>
      <div i-ph:magnifying-glass text-xl op50 />
      <input
        v-model="input"
        v-focus
        type="text"
        text-xl
        bg-transparent
        outline-none
        w-full
        border-none
        placeholder="请填写关键词"
        @keyup.enter="search"
      />
    </div>
    <div
      mt-30px
      px-2
      ref="containerRef"
      class="max-h-[calc(100vh-100px)] of-y-auto hidden-scrollbar-y"
    >
      <SearchCard
        v-for="item in mediaDataList"
        :key="item.id"
        :record="item"
      ></SearchCard>
    </div>
  </div>
</template>

<style scoped></style>
